<template>
  <div class="pop">
    <img src="../assets/shuiwu/pop.png" />
    <table class="pop-text">
      <tr>
        <td width="120">输出电压:</td>
        <td>{{ shuiku.dianya }} V</td>
      </tr>
      <tr>
        <td>输出电流:</td>
        <td>{{ shuiku.dianliu }} A</td>
      </tr>
      <tr>
        <td>泵组温度:</td>
        <td>{{ shuiku.wendu }} ℃</td>
      </tr>
      <tr>
        <td>正向功率:</td>
        <td>{{ shuiku.gonglv }} KW</td>
      </tr>
    </table>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, toRefs, reactive } from "vue";
import { prodApi } from "@/utils/shuiwu/api";
const state = reactive({
  shuiku: {
    dianya: 0,
    dianliu: 0,
    wendu: 0,
    gonglv: 0,
    pinlv: 0,
  },
});

let { shuiku } = toRefs(state);

onMounted(() => {
  getShuiKu(630);
  getWendu(642);
});

function getShuiKu(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4851) {
        state.shuiku.dianya = arr[i].value;
      }
      if (arr[i].modelId == 4857) {
        state.shuiku.dianliu = arr[i].value;
      }

      if (arr[i].modelId == 4371) {
        state.shuiku.gonglv = arr[i].value;
      }
    }
  });
}
function getWendu(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4667) {
        state.shuiku.wendu = arr[i].value;
      }
    }
  });
}
</script>
<style scoped>
.pop {
  height: 420px;
  width: 460px;
  position: relation;
}
.pop img {
  width: 460px;
}
.pop .pop-text {
  box-sizing: border-box;
  position: absolute;
  top: 138px;
  left: 66px;
  width: 362px;
}
.pop .pop-text td {
  list-style: none;
  height: 48px;
  color: #fff;
  font-size: 21px;
}
</style>
